import React from 'react'
import PropTypes from 'prop-types'
import {
    Table, Button, Popover,
} from 'antd'
import { useEffect } from 'react'
import { connect } from 'react-redux'
import { fetchMusic, deleteSlide } from '../../../store/actions'

function Index(props) {
    useEffect(() => {
        props.fetchData(props)
    }, [])
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '歌手',
            dataIndex: 'singer',
            key: 'singer',
        },
        {
            title: '歌名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'url',
            dataIndex: 'url',
            key: 'url',
            /* eslint-disable */

            render: (text, record) => {
                const content = (
                    <div>
                        <p>{record.url}</p>
                    </div>
                )
                return (
                    <Popover content={content} title="地址">
                        <Button type="primary">地址</Button>
                    </Popover>
                )
            },
            /* eslint-disable */
        },
        
        // {
        //     title: '编辑',
        //     dataIndex: '编辑',
        //     key: '编辑',
        //                         /* eslint-disable */

        //     render: (text, record) => {
        //         if (record.status == 1) {
        //             // 如果是已激活
        //             return (
        //                 <div>
        //                     <Space size="middle">
        //                         /* eslint-disable */
        //                         <a onClick={() => props.deleteSlide(record)}>删除</a>
        //                     </Space>
        //                     <Space size="middle">
        //                         <a>下线</a>
        //                     </Space>
        //                 </div>
        //             )
        //         }
        //         return (
        //             <div>
        //                 <Space size="middle">
        //                     <a>删除</a>
        //                 </Space>
        //                 <Space size="middle">
        //                     <a>上线</a>
        //                 </Space>
        //             </div>
        //         )
        //     },
        //     /* eslint-disable */
        // },
    ]
    return (
        <div>
            <Button type="link" onClick={() => props.history.push('/addMusic')}>上传</Button>
            <Table columns={columns} dataSource={props.list} />
        </div>
    )
}
const mapStateToProps = (store) => {
    return {
        list: store.songs,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        fetchData(props) {
            dispatch(fetchMusic(props))
        },
        deleteSlide(record) {
            dispatch(deleteSlide(record, props))
        },
    }
}

Index.propTypes = {
    list: PropTypes.array,
    fetchData: PropTypes.func,
    deleteSlide: PropTypes.func,
    history: PropTypes.object,
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)
